<template>
  <div class="dashboard-container">
    <div class="app-container">

      <el-card class="tree-card">
        <TreeTools :tree-node="company" :is-root="true" @addDept="addDept"/>
        <el-tree :data="departs" :props="defaultProps" default-expand-all>
          <TreeTools slot-scope="{ data }" :tree-node="data" @delDepts="getDepartments" @addDept="addDept"  @editDepts="editDepts" />
        </el-tree>
      </el-card>

      <AddDept ref="addDept" :showDialog.sync="showDialog" :tree-node="node" @addDept="getDepartments"/>

    </div>
  </div>
</template>

<script>
  import TreeTools from "@/views/departments/components/tree-tools";
  import {getDepartments} from "@/api/departments";
  import {transListToTreeData} from "@/utils";
  import AddDept from "@/views/departments/components/add-dept";

  export default {
    data() {
      return {
        company: {name: '', manager: '负责人',id:''},
        departs: [],
        showDialog: false, // 控制弹层变量
        defaultProps: {
          label: 'name'
        },
        node: null // 专门来存储当前操作的节点
      };
    },
    created() {
      this.getDepartments()
    },
    comments: {
      TreeTools,
      AddDept
    },
    methods: {
      async getDepartments() {
        const result = await getDepartments()
        this.company.name = result.companyName
        this.departs = transListToTreeData(result.depts, '')
        console.log(result)
      },
      //添加部门
      addDept(node) {
        this.showDialog = true
        this.node = node
      },
      async editDepts(node) {
        await this.$refs.addDept.getDepartDetail(node.id)
        this.showDialog = true
        this.node = node
      }
    },
    components: {
      AddDept,
      TreeTools,
      handleNodeClick(data) {
        console.log(data);
      }
    }
  }
</script>

<style scoped>

  .tree-card {
    padding: 30px 140px;
    font-size: 14px;
  }

</style>
